<template>
	<div>
		<Row style='margin-right:-24px'>
			<Col span='6' v-for='(item,index) in dayLog' :key='index'>
				<Card class='col-card'>
					<div style='padding:8px'>
						<div style='display:flex;align-items:center'>
							<div class='dot' :style='{background:item.color}'></div>
							<span style='font-size: 16px;'>{{item.name}}</span>
						</div>
						<div style='text-align: center'>
							<!-- <div class='big-circle' style='background:#F17F97;box-shadow: 0 0 10px 0 #ffe2e6;'>
								<div class='small-circle'>
									<div style='font-size:16px;color:#464C5b;margin-top:50px;'>请求</div>
									<div style='font-size:26px;color:#F17F97;'>{{dayLog.request || 0}}</div>
								</div>
							</div> -->
							<i-circle
	                            :size="180"
	                            :trail-width="6"
	                            :stroke-width="7"
	                            :percent="percent"
	                            stroke-linecap="square"
	                            :stroke-color="item.color"
	                            style='margin: 20px 0'>
		                        <div class="circle-custom">
		                            <div style='font-size:16px;color:#464C5b;'>{{item.name}}</div>
									<div style='font-size:26px;margin-top: 10px' :style='{color:item.color}'>{{item.data || 0}}</div>
		                        </div>
		                    </i-circle>
						</div>
					</div>
				</Card>
			</Col>
		</Row>
		
		<div class="echarts">
			<p>请求</p>
            <IEcharts :option="request"></IEcharts>
        </div>
        <div class="echarts">
        	<p>流量</p>
            <IEcharts :option="flow"></IEcharts>
        </div>
       
       <div class="echarts">
       		<p>存储</p>
            <IEcharts :option="storage"></IEcharts>
        </div>
       
        <div class="echarts">
       		<p>调试</p>
            <IEcharts :option="debug"></IEcharts>
        </div>
       
	</div>
</template>
<script type="text/javascript">
	import axios from 'axios'
	import IEcharts from 'vue-echarts-v3/src/full.vue';
	export default{
		components: {
          IEcharts
        },
		data(){
			return{
				dayLog:[],
				//请求
				request: {
				    tooltip : {
				        trigger: 'axis',
				        axisPointer: {
				            type: 'cross',
				            label: {
				                backgroundColor: '#F17F97'
				            }
				        }
				    },
				    xAxis : [
				        {
				            type : 'category',
				            name:'时间',
				            boundaryGap : false,
				            data : []
				        }
				    ],
				    yAxis : [
				        {
				            type : 'value',
				            name:'次数'
				        }
				    ],
				    series : [
				        {
				            name:'请求次数',
				            type:'line',
				            smooth: true,
				            areaStyle: {normal: {
				            	color: {
								    type: 'radial',
								    x: 0.5,
								    y: 0.5,
								    r: 0.5,
								    colorStops: [{
								        offset: 0, color: 'rgba(241, 127, 151, 0.5)' // 0% 处的颜色
								    }, {
								        offset: 1, color: 'rgba(241, 127, 151, 0.5)' // 100% 处的颜色
								    }],
								}
				            }},
				            data:[],
				            itemStyle: {
				                normal: {
				                    color: '#F17F97'
				                }
				            }
				        },
				        
				    ]
              	},
              	//流量
              	flow: {
				    tooltip : {
				        trigger: 'axis',
				        axisPointer: {
				            type: 'cross',
				            label: {
				                backgroundColor: '#09D89E'
				            }
				        }
				    },
				    xAxis : [
				        {
				            type : 'category',
				            name:'时间',
				            boundaryGap : false,
				            data : []
				        }
				    ],
				    yAxis : [
				        {
				            type : 'value',
				            name:'流量'
				        }
				    ],
				    series : [
				        {
				            name:'流量',
				            type:'line',
				            smooth: true,
				            areaStyle: {normal: {
				            	color: {
								    type: 'radial',
								    x: 0.5,
								    y: 0.5,
								    r: 0.5,
								    colorStops: [{
								        offset: 0, color: 'rgba(9, 216, 158, 0.5)' // 0% 处的颜色
								    }, {
								        offset: 1, color: 'rgba(9, 216, 158, 0.5)' // 100% 处的颜色
								    }],
								}
				            }},
				            data:[],
				            itemStyle: {
				                normal: {
				                    color: '#09D89E'
				                }
				            }
				        },
				        
				    ]
              	},
              	//存储
              	storage: {
				    tooltip : {
				        trigger: 'axis',
				        axisPointer: {
				            type: 'cross',
				            label: {
				                backgroundColor: '#92AEFC'
				            }
				        }
				    },
				    xAxis : [
				        {
				            type : 'category',
				            name:'时间',
				            boundaryGap : false,
				            data : []
				        }
				    ],
				    yAxis : [
				        {
				            type : 'value',
				            name:'存储'
				        }
				    ],
				    series : [
				        {
				            name:'存储',
				            type:'line',
				            smooth: true,
				            areaStyle: {normal: {
				            	color: {
								    type: 'radial',
								    x: 0.5,
								    y: 0.5,
								    r: 0.5,
								    colorStops: [{
								        offset: 0, color: 'rgba(146, 174, 252, 0.5)' // 0% 处的颜色
								    }, {
								        offset: 1, color: 'rgba(146, 174, 252, 0.5)' // 100% 处的颜色
								    }],
								}
				            }},
				            data:[],
				            itemStyle: {
				                normal: {
				                    color: '#92AEFC'
				                }
				            }
				        },
				        
				    ]
              	},
              	//调试
              	debug: {
				    tooltip : {
				        trigger: 'axis',
				        axisPointer: {
				            type: 'cross',
				            label: {
				                backgroundColor: '#FCBC92'
				            }
				        }
				    },
				    xAxis : [
				        {
				            type : 'category',
				            name:'时间',
				            boundaryGap : false,
				            data : []
				        }
				    ],
				    yAxis : [
				        {
				            type : 'value',
				            name:'调试'
				        }
				    ],
				    series : [
				        {
				            name:'调试',
				            type:'line',
				            smooth: true,
				            areaStyle: {normal: {
				            	color: {
								    type: 'radial',
								    x: 0.5,
								    y: 0.5,
								    r: 0.5,
								    colorStops: [{
								        offset: 0, color: 'rgba(252, 188, 146, 0.5)' // 0% 处的颜色
								    }, {
								        offset: 1, color: 'rgba(252, 188, 146, 0.5)' // 100% 处的颜色
								    }],
								}
				            }},
				            data:[],
				            itemStyle: {
				                normal: {
				                    color: '#FCBC92'
				                }
				            }
				        },
				        
				    ]
              	},
              	percent:0
			}
		},
		created(){
			
			this.$bus.emit('updateMainMenuActive',this.$route.fullPath);
			axios.defaults.headers.common["BaasToken"] = localStorage.BaasToken;
			this.fetch('/home/app/statistics').then(res=>{
				if(res&&res.data.data&&res.data.code){
					let data = res.data.data.allLog;
					this.dayLog.push(
						{
							name:'请求',
							data:data.request,
							color:'#F17F97'
						},
						{
							name:'流量',
							data:data.flow,
							color:'#09D89E'
						},
						{
							name:'存储',
							data:data.storage,
							color:'#92AEFC'
						},
						{
							name:'调试',
							data:data.debug,
							color:'#FCBC92'
						},
					);

					//请求
					this.request.series[0].data = res.data.data.requests;
					this.request.xAxis[0].data = res.data.data.dates;
					//流量
					this.flow.series[0].data = res.data.data.flows;
					this.flow.xAxis[0].data = res.data.data.dates;
					this.flow.yAxis[0].name = `流量 (${res.data.data.flowUnit})`;
					//存储
					this.storage.series[0].data = res.data.data.storages;
					this.storage.xAxis[0].data = res.data.data.dates; 
					this.storage.yAxis[0].name = `存储 (${res.data.data.storageUnit})`;
					//调试
					this.debug.series[0].data = res.data.data.debugs;
					this.debug.xAxis[0].data = res.data.data.dates;
				}
			})

			let interval = setInterval(()=>{
				this.percent += 20;
				if(this.percent == 100){
					clearInterval(interval)
				}
			},10)
		}
		
	}
</script>
<style scoped>
	.dot{
		width:6px;
		height:6px;
		border-radius: 3px;
		margin-right:8px;
	}
	.col-card{
		margin-bottom: 24px;
		margin-right: 24px;
		background: #fff;
		border:0;
	}
	
	.col-card:nth-last-child{
		margin-right: 0;
	}
	.big-circle{
		width:180px;
		height:180px;
		border-radius: 50%;
		margin:20px auto;
		position: relative;
	}
	.small-circle{
		width: 156px;
	    height: 156px;
		border-radius: 50%;
		position: absolute;
		top:12px;
		left:12px;
		background:#fff;
	}
	.echarts {
        width: 100%;
        height: 400px;
        background: #fff;
        padding:40px 0;
        margin-bottom: 24px;
      }
     .echarts p{
     	font-size:20px;
     	font-weight:500;
     	color:#464C5B;
     	padding-left: 50px
     }
</style>
